<template>
    <div class="document-manager-wapper">
        <van-nav-bar
                title="AGV区域详情"
                left-text="返回"
                left-arrow
                fixed
                @click-left="onClickLeft"
        >
            <van-icon name="arrow-left" slot="left"/>
            <!--<van-icon name="search" slot="left"/>-->
        </van-nav-bar>
        <div class="document-content document-content-flex" ref="content">

            <div
                    class="document-content-column"

                    v-for="(item, index) in list"
            >
                <!--<div class="cell-wapper-column-value"-->
                <!--@click="showInstructionInfo(item.name,item.title)"-->
                <!--:style="{ background: item.color }">-->
                <!--{{ item.title }}-->
                <!--</div>-->
                <van-button type="default"
                            @click="showInstructionInfo(item.name,item.title)"
                            style="width: 100%">{{ item.title }}</van-button>
            </div>
            <!-- <div class="cell-content-map-input cell-content-map-input-flex" >
                      <div class="cell-content-map-input-value">
                          <van-cell-group>
                              <van-field v-model="value" placeholder="请输入用户名"/>
                          </van-cell-group>
                      </div>
                      <div class="cell-content-map-input-img">
                          <img src="@/assets/images/arrow.png">
                      </div>
                      <div class="cell-content-map-input-value">
                          <van-cell-group>
                              <van-field v-model="value" placeholder="请输入用户名"/>
                          </van-cell-group>
                      </div>
                      <div>
                          <van-button type="info" size="small" @click="sumbit">提交</van-button>
                      </div>

                  </div> -->
            <!--<div class="cell-content">-->
            <!--<div class="cell-content-body">-->
            <!--&lt;!&ndash;<div class="cell-title">{{preArea}}&ndash;&gt;-->
            <!--&lt;!&ndash;<div class="switch-div">&ndash;&gt;-->
            <!--&lt;!&ndash;<span class="span-title">自动刷新</span>&ndash;&gt;-->
            <!--&lt;!&ndash;<van-switch v-model="checked" size="14px"/>&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
            <!--&lt;!&ndash;<div class="switch-div" style="left:10px;">&ndash;&gt;-->
            <!--&lt;!&ndash;<van-button type="primary" size="mini" @click="getLocation">刷新</van-button>&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
            <!--<div class="cell-wapper">-->
            <!--<div-->
            <!--class="cell-wapper-column"-->

            <!--v-for="(item, index) in list"-->
            <!--&gt;-->
            <!--<div  class="cell-wapper-column-value"-->
            <!--@click="showInstructionInfo(item.name,item.title)"-->
            <!--:style="{ background: item.color }">-->
            <!--{{ item.title }}-->
            <!--</div>-->

            <!--&lt;!&ndash;<div class="cell-wapper-row"></div>&ndash;&gt;-->
            <!--&lt;!&ndash;<div class="cell-wapper-row"></div>&ndash;&gt;-->
            <!--&lt;!&ndash;<div class="cell-wapper-row"></div>&ndash;&gt;-->
            <!--&lt;!&ndash;<div class="cell-wapper-row"></div>&ndash;&gt;-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
        </div>
        <!--<van-action-sheet v-model="show"-->

        <!--title="移库">-->
        <!--<div class="action-sheet-table">-->
        <!--<Map :TransferFlag.sync="transferFlag"></Map>-->
        <!--</div>-->
        <!--</van-action-sheet>-->
    </div>
</template>

<script>
    export default {
        name: "AVGList",
        components: {
            // Map: () => import("./component/Map.vue")
        },
        data() {
            return {
                show: true,
                value: "",
                value1: "",
                value2: "",
                transferFlag: 1,
                list: [
                    {
                        title: "第一列货架",
                        name: "R1-A-storage-01",
                        color: "#ddd"
                    },
                    {
                        title: "第二列货架",
                        name: "R1-A-storage-02",
                        color: "#ddd"
                    },
                    {
                        title: "第三列货架",
                        name: "R1-A-storage-03",
                        color: "#ddd"
                    },

                    {
                        title: "第四列货架",
                        name: "R1-A-storage-04",
                        color: "#ddd"
                    },
                    {
                        title: "第五列货架",
                        name: "R1-A-storage-05",
                        color: "#ddd"
                    },
                    {
                        title: "第六列货架",
                        name: "R1-A-storage-06",
                        color: "#ddd"
                    },
                    {
                        title: "第七列货架",
                        name: "R1-A-storage-07",
                        color: "#ddd"
                    },
                    {
                        title: "第八列货架",
                        name: "R1-A-storage-08",
                        color: "#ddd"
                    },
                    {
                        title: "第九列货架",
                        name: "R1-A-storage-09",
                        color: "#ddd"
                    }
                ]
            };
        },
        methods: {
            onClickLeft() {
                console.log("onClickLeft");
                this.$router.back(-1);
                // this.$router.push({
                //     path: "/search"
                // })
            },
            showInstructionInfo(id, title) {
                this.$router.push({
                    path: "/order/info",
                    query: {
                        id: id,
                        title: title,
                        value1: this.value1,
                        value2: this.value2
                    }
                });
            },
            sumbit() {
            }
        },
        created() {
            if (this.$route.query.value1 != null) {
                this.value1 = this.$route.query.value1;
            }
            if (this.$route.query.value2 != null) {
                this.value2 = this.$route.query.value2;
            }
        }
    };
</script>

<style scoped lang="scss">
    .document-manager-wapper {
        position: relative;
        .document-content {
            position: relative;
            top: 46px;
            height: 100%;
            --n: 6;
            /*margin-bottom: 10px;*/
            overflow-y: auto;
            .document-content-column {
                width: 80%;
                /*margin-bottom: 10px;*/
            }
            .cell-content-map-input {
                position: relative;
                width: 100%;
                padding: 10px 10px 0 10px;
                .cell-content-map-input-value {
                    width: 30%;
                }
                .cell-content-map-input-img {
                    width: 55px;
                    height: 20px;
                    img {
                        height: 100%;
                        width: 100%;
                    }
                }
            }
            .cell-content-map-input-flex {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .cell-content {
                padding: 10px;
                position: relative;
                /*width: 100%;*/
                width: 50%;
                margin: 0 auto;
                /*-webkit-transform: rotate(90deg);*/
                /*height: 260px;*/
                /*border: solid 1px yellow;*/
                /*border-bottom: solid 1px #ddd;*/
                .cell-content-body {
                    background: #fff;
                    height: 100%;
                    .cell-title {
                        height: 45px;
                        line-height: 45px;
                        text-align: center;
                        font-size: 20px;
                        font-weight: bold;
                        position: relative;
                        .switch-div {
                            position: absolute;
                            right: 10px;
                            height: 100%;
                            width: 85px;
                            top: 0px;
                            justify-content: center; //子元素水平居中
                            align-items: center; //子元素垂直居中
                            display: -webkit-flex;
                            .span-title {
                                font-weight: normal;
                                font-size: 12px;
                                padding-right: 5px;
                            }
                        }
                    }
                    .cell-wapper {
                        border-top: solid 1px #ddd;
                        height: auto;
                        /*text-align: center;*/
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        flex-direction: row;
                        .cell-wapper-column {
                            position: relative;
                            /*width: calc(10% - 10px);*/
                            /*margin-right: 10px;*/
                            /*writing-mode: vertical-lr;*/
                            width: 33%;
                            height: 100px;
                            margin: 10px 0px;
                            /*padding: 0px 10px;*/
                            /*background-color: #ddd;*/
                            display: flex;
                            justify-content: center;
                            flex-wrap: nowrap;
                            align-items: center;
                            .cell-wapper-column-value {
                                height: 100%;
                                width: 50%;
                                writing-mode: vertical-lr;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                        }
                        .cell-wapper-row {
                            /*background-color: yellow;*/
                            /*border-bottom: solid 1px red;*/
                            width: 20%;
                            background: #969799;
                            border: solid 1px yellow;
                            height: 100%;
                            cursor: pointer;
                        }
                        .cell-wapper-row1 {
                            /*background-color: yellow;*/
                            /*border-bottom: solid 1px red;*/
                            width: 20%;
                            background: green;
                            border: solid 1px yellow;
                            height: 100%;
                            cursor: pointer;
                        }
                        .cell-wapper-row2 {
                            /*background-color: yellow;*/
                            /*border-bottom: solid 1px red;*/
                            width: 20%;
                            background: yellow;
                            border: solid 1px yellow;
                            height: 100%;
                            cursor: pointer;
                        }
                        .cell-wapper-row3 {
                            /*background-color: yellow;*/
                            /*border-bottom: solid 1px red;*/
                            width: 20%;
                            background: yellow;
                            border: solid 1px yellow;
                            height: 100%;
                            cursor: pointer;
                            -webkit-animation: twinkling 1s infinite ease-in-out;
                        }
                        .cell-wapper-row4 {
                            /*background-color: yellow;*/
                            /*border-bottom: solid 1px red;*/
                            width: 20%;
                            background: red;
                            border: solid 1px yellow;
                            height: 100%;
                            cursor: pointer;
                            -webkit-animation: twinkling 1s infinite ease-in-out;
                        }
                        .cell-wapper-row5 {
                            /*background-color: yellow;*/
                            /*border-bottom: solid 1px red;*/
                            width: 20%;
                            background: red;
                            border: solid 1px yellow;
                            height: 100%;
                            cursor: pointer;
                        }
                    }
                }
            }
            .custom-title {
                color: #000;
                padding: 8px 0px;
            }
            .custom-title1 {
                color: #000;
                padding: 8px 0px;
                span {
                    font-size: 12px;
                }
            }
        }
        .document-content-flex {
            display: flex;
            /*align-items: center;*/
            justify-content: center;
            flex-wrap: wrap;
            padding: 30px 0;
        }
        .divshow {
            -webkit-animation: twinkling 1s infinite ease-in-out;
        }
        .animated {
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
        @-webkit-keyframes twinkling {
            0% {
                opacity: 0.5;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes twinkling {
            0% {
                opacity: 0.5;
            }
            100% {
                opacity: 1;
            }
        }
        .action-sheet-table {
            padding: 10px;
            max-height: 300px;
            overflow-y: auto;
            table {
                font-family: Consolas, Menlo, Courier, monospace;
                font-size: 12px;
                border-collapse: collapse;
                border-spacing: 0;
                empty-cells: show;
                border: 1px solid #e9e9e9;
                width: 100%;
                margin-bottom: 24px;
            }
            table th {
                background: #f7f7f7;
                white-space: nowrap;
                color: #5c6b77;
                font-weight: 600;
            }
            table td,
            table th {
                border: 1px solid #e9e9e9;
                padding: 8px 16px;
                text-align: left;
            }
        }
    }
</style>
